<template>
  <div style="transform: translateX()">
    <!-- <NaiveCrud :option :data></NaiveCrud> -->
    <!-- <NCollapse
      v-model:expanded-names="expandNames"
      :default-expanded-names="['1']"
      splay-directive="show">
      <n-collapse-item name="1">
        <template #arrow>
          <span></span>
        </template>
        <template #header>
          <component :is="null" />
          <component v-if="true" :is="text(true)" />
          <div v-else style="font-size: 16px">张三</div>
        </template>
        <template #header-extra>
          <n-icon
            :size="20"
            :style="{
              transition: 'transform 0.3s',
              transform: expandNames?.includes('1') ? 'rotate(-90deg)' : '',
            }">
            <ChevronLeft16Regular />
          </n-icon>
        </template>
        一周小结：行动是打破平庸最好的回击
      </n-collapse-item>
      <n-collapse-item title="李四" name="2">
        一周小结：勤奋是获取成功的唯一捷径
      </n-collapse-item>
      <n-collapse-item name="3">
        <n-text type="error">
          一周小结：生产队的驴都不敢这么休息，建议优化
        </n-text>
        <template #header>
          <n-text type="error"> 王五 </n-text>
        </template>
        <template #header-extra>
          <component
            :is="text(expandNames?.includes('3'))"
            @click="flag = !flag" />
        </template>
      </n-collapse-item>
    </NCollapse> -->
    <!-- <component :is="MyComp" /> -->
    <!-- <Input
      v-model="value"
      :option="{
        onUpdate,
        prefix: () => h(NText, { type: 'error' }, 'hhhh'),
      }" />
    <Radio
      v-model="value"
      :option="{
        button: true,
        dicData: [
          { label: '1', value: 1 },
          { label: '2', value: 2, disabled: true },
        ],
      }" />
    <Checkbox
      v-model="value"
      :option="{
        size: 'small',
        dicData: [
          { label: '1', value: 1 },
          { label: '2', value: 2 },
        ],
      }" />
    <Switch
      v-model="value"
      :option="{
        round: false,
        rubberBand: true,
        renderIcon: () => h(ChevronLeft16Regular),
        renderChecked: () => 'asdfa',
      }" />
    <Select
      v-model="value"
      :option="{ size: 'small', dicData: [], renderEmpty: () => 'asdf' }" />
    <NForm ref="formRef" :model="form" style="max-width: 700px">
      <NGrid :cols="24" :x-gap="24">
        <NFormItemGi
          :span="24"
          :label="'option.label'"
          :rule="{
            required: true,
            message: 'must',
            trigger: 'blur',
            level: 'warning',
          }"
          :path="'value'">
          <form-item v-model="form.value" :option="{ type: 'input' }" />
        </NFormItemGi>
        <NFormItemGi
          :span="16"
          :label="'option.label'"
          :rule="{
            required: true,
            message: 'must',
            trigger: 'blur',
            level: 'warning',
          }"
          :path="'value'">
          <form-item v-model="form.value" :option="{ type: 'switch' }" />
        </NFormItemGi>
        <NFormItemGi
          :span="8"
          :label="'option.label'"
          :rule="{
            required: true,
            message: 'must',
            trigger: 'blur',
            level: 'warning',
          }"
          :path="'value'">
          <form-item v-model="form.value" :option="{ type: 'password' }" />
        </NFormItemGi>
        <NFormItemGi
          :span="16"
          :label="'option.label'"
          :rule="{
            required: true,
            message: 'must',
            trigger: 'blur',
            level: 'warning',
          }"
          :path="'value'">
          <form-item v-model="form.value" :option="{ type: 'number' }" />
        </NFormItemGi>
        <NFormItemGi
          :span="16"
          :label="'option.label'"
          :rule="{
            required: true,
            message: 'must',
            trigger: 'blur',
            level: 'warning',
          }"
          :path="'value'">
          <form-item v-model="form.value" :option="{ type: 'textarea' }" />
        </NFormItemGi>
      </NGrid>
    </NForm>
    <NButton @click="formRef.validate()">valid</NButton> -->

    <NConfigProvider :locale="zhCN"></NConfigProvider>
    <Form :option></Form>
    <!-- <NFormItemGi :rule="{required: true, }">

    </NFormItemGi> -->
    <button @click="">change</button>
  </div>
</template>

<script lang="ts" setup>
// import { NaiveCrudOption } from "@/crud/src/interface";
// import { NaiveCrud } from "@/index";
import { ChevronLeft16Regular } from "@vicons/fluent";
import {
  NConfigProvider,
  NCollapse,
  NCollapseItem,
  NText,
  NIcon,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NGrid,
  NFormItemGi,
  zhCN,
} from "naive-ui";
import AText from "./AText.vue";
import Input from "@/form/src/form-items/Input.vue";
import Radio from "@/form/src/form-items/Radio.vue";
import Checkbox from "@/form/src/form-items/Checkbox.vue";
import Switch from "@/form/src/form-items/Switch.vue";
import Select from "@/form/src/form-items/Select.vue";
import Form from "@/form/src/Form.vue";
import { VNodeChild, computed, defineAsyncComponent, h, ref } from "vue";
import { NaiveFormOption } from "@/form/src/interface";

const flag = ref(false);

const option = ref<NaiveFormOption>({
  size: "small",
  labelWidth: 70,
  labelPlacement: "left",
  groupAccordion: true,
  requireMarkPlacement: "right-hanging",
  group: [
    {
      title: "选项1",
      expanded: false,
      renderIcon: (expanded: boolean) => {
        return h("span", {}, expanded ? "hhh" : "AAA");
      },
      items: [
        {
          label: "选项1",
          key: "value",
          span: 20,
          value: "41234123",
          rules: {
            // required: true,
            len: 5,
            trigger: "input",
          },
          renderSuffix: () => h(ChevronLeft16Regular, { style: "width: 20px;" }),
        },
        {
          label: "选项2",
          key: "valu2",
          type: "switch",
          span: 20,
          value: true,
          rules: {
            required: true,
            message: "请选择选项2",
            trigger: "change",
            type: "boolean",
          },
        },
      ],
    },
    {
      title: "选项2",
      expanded: true,
      items: [
        {
          label: "选项1",
          key: "value3",
          span: 20,
          renderSuffix: () => h(ChevronLeft16Regular, { style: "width: 20px;" }),
        },
        {
          label: "选项2",
          key: "valu24",
          type: "switch",
          span: 20,
        },
      ],
    },
  ],
  items: [
    {
      label: "选项1",
      key: "value",
      type: "checkbox",
      size: "small",
      dicData: [
        { label: "1", value: 1 },
        { label: "2", value: 2 },
      ],
    },
    {
      label: "选项2",
      key: "valu2",
      type: "switch",
      size: "small",
      rules: {
        required: true,
        message: "请选择选项3",
        trigger: "blur",
        type: "boolean",
      },
    },
    {
      label: "选项3",
      key: "valu23",
      size: "small",
      rules: { required: true, message: "请选择选项3", trigger: "blur" },
    },
  ],
});

const form = ref({});

const formRef = ref();

const value = ref("");

const onUpdate = (v: string) => {
  console.log(v);
};

const MyComp = computed(() => {
  return defineAsyncComponent(() => import("./AText.vue"));
});

// let MyComp = null;
// if (true) {
//   MyComp = defineAsyncComponent(() => import("./AText.vue"));
// }

const expandNames = ref<string[]>();

const text = (type: boolean): VNodeChild => {
  return h(
    NText,
    {
      type: "error",
      style: {
        transition: "all 0.3s",
        transform: type ? "" : "translateX(-30px)",
        marginRight: "20px !important",
      },
    },
    "本周工作日工作长：45 小时"
  );
};

interface User {
  id: number;
  name: string;
  age: number;
  address: string;
}
// const option: NaiveCrudOption<User> = {
//   columns: [
//     {
//       title: "姓名",
//       key: "name",
//       width: 200
//     },
//     {
//       title: "年龄",
//       key: "age",
//       width: 200
//     },
//     {
//       title: "地址",
//       key: "address",
//       width: 200
//     },
//   ]
// }

const data = [
  {
    name: "张三",
    age: 18,
    address: "北京",
  },
  {
    name: "李四",
    age: 19,
    address: "上海",
  },
];
</script>
